<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			body{
				width: 500px;
				height: 600px;
				background:url(img/22.jpg)no-repeat top;
				
			}
			.box{
				width: 200px;
				height: 200px;
				box-shadow: 0px 0px 10px #000;
				margin-left: 700px ;
				margin-top: 300px;
				display: flex;
				flex-wrap:wrap;
				cursor: pointer;
			}
			.list{
				width: 50px;
				height: 50px;
				border:1px solid #000;
				overflow: hidden;
			}
			.ball{
				width: 35px;
				height: 35px;
				border-radius: 100%;
				margin: 5px auto 0;
				background:radial-gradient(circle at 10px 10px,pink,#fff);
				box-shadow: 4px 4px 10px #000;
			}
			.ball2{
				width: 35px;
				height: 35px;
				border-radius: 100%;
				margin: 5px auto 0;
				background:radial-gradient(circle at 10px 10px,pink,#000);
				box-shadow: 4px 4px 10px #000;
			}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			
		</div>
		<script>
			window.onload = function(){
				var obox =document.getElementById("box");
				var first=true;
				for(var i=0;i<16;i++){
					var odiv = document.createElement("div");
					odiv.setAttribute("class","list");
					obox.appendChild(odiv);
					odiv.onclick = function(){
						if(first){
							var ball = document.createElement("div")
							ball.setAttribute("class","ball")
							this.appendChild(ball)
							first=false;
						}else{
							var ball = document.createElement("div")
							ball.setAttribute("class","ball2")
							this.appendChild(ball)
							first=true;
						}
					}
				}
			}
		</script>
	</body>
</html>
